<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

	<title>Employee Directory</title>
</head>

<body>

<div class="container">

	<h3>Employee Directory</h3>
	<hr>

	<!-- Add a button -->
	<a th:href="@{/employees/showFormForAdd}"
		class="btn btn-primary btn-sm mb-3">
		Add Employee
	</a>

	<table class="table table-bordered table-striped">
		<thead class="table-dark">
			<tr>
				<th>First Name</th>
				<th>Last Name</th>
				<th>Email</th>
				<th>Action</th>
			</tr>
		</thead>
		
		<tbody>
			<tr th:each="tempEmployee : ${employees}">
			
				<td th:text="${tempEmployee.firstName}" />	
				<td th:text="${tempEmployee.lastName}" />	
				<td th:text="${tempEmployee.email}" />

				<!-- Add update button/link -->
				<td>
					<a th:href="@{/employees/showFormForUpdate(employeeId=${tempEmployee.id})}"
					   class="btn btn-info btn-sm">
						Update
					</a>

					<!-- Add "delete" button/link -->
					<a th:href="@{/employees/delete(employeeId=${tempEmployee.id})}"
					   class="btn btn-danger btn-sm"
					   onclick="if (!(confirm('Are you sure you want to delete this employee?'))) return false">
						Delete
					</a>
				</td>

			</tr>
		</tbody>		
	</table>
	
</div>
	
</body>
</html>



